import React from 'react';
import debounce from 'lodash/debounce';
import {connect} from 'dva/index';
import {Button, Card, Checkbox, Col, Form, InputNumber, message, Modal, Row, Select, Table, Tabs} from 'antd';
import PortSelect from '../../common/portSelect';
import StreetSelect from '../../common/streetSelect';
import QuoCustomerDetail from './quoCustomerDetail';

const R = require('ramda');
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;

const calculatedFields = ['size20gp', 'size40gp', 'size40hq', 'loadingPort', 'destinationPort', 'insuranceAmt', 'quoteRate', 'service', 'area'];

const quotationFeeDetail = Form.create()(class QuotationFeeDetail extends React.Component {
    constructor(props) {
        super(props);
        this.initData(null, true);
    }

    componentWillReceiveProps(nextProps) {
        if (!R.equals(this.props.quotationFee.dataSource)(nextProps.quotationFee.dataSource)) {
            this.initData(nextProps.quotationFee.dataSource)
        }
    }

    initData = (dataSource, flag) => {
        dataSource = R.isNil(dataSource) ? {} : dataSource;
        let localFeeList = dataSource.localFeeList ? dataSource.localFeeList : []
        let declareFeeList = dataSource.declareFeeList ? dataSource.declareFeeList : []
        let trailerFeeList = dataSource.trailerFeeList ? dataSource.trailerFeeList : []
        let quotationAmount = dataSource.quotationAmount ? dataSource.quotationAmount : {}
        if (flag) {
            this.state = {
                open: false,
                disabled: false,
                feeDisabled: false,        //费用列表输入框disabled
                recordId: undefined,       //报价记录id
                freightId: undefined,      //海运费id 
                loadingId: undefined,      //起运港、目的港id
                destinationId: undefined,
                view: null,             //view为true时，取报价记录数据
                cstEdit: null,          //cstEdit为true时,客户信息模块disabled按props里的传递;为false时，通过cstInfoDisabled再判断disabled
                cstInfoDisabled: null,
                localFeeList,
                declareFeeList,
                trailerFeeList,
                quotationAmount
            }
        } else {
            this.calculcateFee = debounce(this.calculcateFee, 400);
            this.setState({
                localFeeList,
                declareFeeList,
                trailerFeeList,
                quotationAmount
            })
        }
    }

    handleCancel = () => {
        this.props.company.dataSource = {};
        this.props.quotationFee.dataSource = {};
        this.props.quotationFee.totalDataSource = {};
        this.setState({
            open: false,
            feeDisabled: false,
            cstEdit: false,
            localFeeList: [],
            declareFeeList: [],
            trailerFeeList: []
        });
    }

    handleOpen = (recordId, freightId, loadingId, destinationId, view, cstEdit, cstInfoDisabled, disabled) => {
        this.setState({
            open: true,
            disabled,
            recordId,
            freightId,
            loadingId,
            destinationId,
            view,
            cstEdit,
            cstInfoDisabled
        });
    }

    handleChangeLocalFee = (record, value) => {
        let localFeeList = [...this.state.localFeeList];
        R.map((row) => {
            if (row.weight === record.weight) {
                row.quotePrice = value;
                row.feeUnit = record.feeUnit;
                return;
            }
        }, localFeeList)
        this.setState({ localFeeList });
    }

    handleChangeDeclareFee = (record, value) => {
        let declareFeeList = [...this.state.declareFeeList];
        R.map((row) => {
            if (row.weight === record.weight) {
                row.quotePrice = value;
                row.feeUnit = record.feeUnit;
                return;
            }
        }, declareFeeList)
        this.setState({ declareFeeList });
    }

    handleChangeTrailerFee = (record, value) => {
        let trailerFeeList = [...this.state.trailerFeeList];
        R.map((row) => {
            if (row.weight === record.weight) {
                row.quotePrice = value;
                row.feeUnit = record.feeUnit;
                return;
            }
        }, trailerFeeList)
        this.setState({ trailerFeeList });
    }

    onchangeServer = (type, numFlag, value) => {
        if (!value.includes('2')) {
            this.props.form.setFieldsValue({ area: undefined })
        }
        if (!value.includes('3')) {
            this.props.form.setFieldsValue({ insuranceAmt: null, insuranceCurrency: null })
        }
        this.calculcateFee(type, numFlag, value);
    }

    changeDisabled = () => {
        this.setState({ feeDisabled: false })
    }

    getFeeIetm = (type) => {
        this.props.dispatch({
            type: 'feeItem/getAllFeeItems',
            payload: { type }
        });
    }

    aaddFeeIetm = () => {
        let trailerItem = this.props.form.getFieldValue("trailerItem");
        let feeItemList = this.props.feeItem.feeItemList ? this.props.feeItem.feeItemList : [];
        let dataSource = this.props.quotationFee.dataSource;
        let trailerFeeList = dataSource.trailerFeeList ? dataSource.trailerFeeList : [];
        let fee = {};

        if (R.isNil(trailerItem)) {
            message.info("请选择费用!");
            return;
        }

        if (!R.isEmpty(trailerFeeList)) {
            let addFlag = false;
            for (let j = 0; j < trailerFeeList.length; j++) {
                if (R.equals(trailerItem, trailerFeeList[j].id + "")) {
                    addFlag = true;
                    break;
                }
            }

            if (!addFlag && !R.isEmpty(feeItemList)) {
                for (let i = 0; i < feeItemList.length; i++) {
                    if (R.equals(feeItemList[i].id + "", trailerItem)) {
                        fee.code = feeItemList[i].code;
                        fee.costPrice = "";
                        fee.count = 1;
                        fee.currency = feeItemList[i].currency;
                        fee.fee = "";
                        fee.feeUnit = "JOB";
                        fee.id = trailerItem;
                        fee.name = feeItemList[i].name;
                        fee.quotePrice = null;
                        fee.sellPrice = "";
                        fee.type = "3";//类型：用枚举常量
                        fee.weight = trailerFeeList.length + 1;
                        fee.incidentals = true;
                        break;
                    }
                }
                if (!R.isEmpty(fee)) {
                    trailerFeeList.push(fee);
                    this.setState({ trailerFeeList: trailerFeeList });
                }
            }
        }
    }

    traItem = (val) => {
        let dataSource = this.props.quotationFee.dataSource;
        let trailerFeeList = dataSource.trailerFeeList ? dataSource.trailerFeeList : [];
        if (!R.isEmpty(trailerFeeList)) {
            for (let j = 0; j < trailerFeeList.length; j++) {
                if (R.equals(val, trailerFeeList[j].id)) {
                    trailerFeeList.pop(val);
                    this.setState({ trailerFeeList: trailerFeeList });
                }
            }
        }
    }

    addFeeIetm = () => {
        let declareItem = this.props.form.getFieldValue("declareItem");
        let feeItemList = this.props.feeItem.feeItemList ? this.props.feeItem.feeItemList : [];
        let dataSource = this.props.quotationFee.dataSource;
        let declareFeeList = dataSource.declareFeeList ? dataSource.declareFeeList : [];
        let fee = {};

        if (R.isNil(declareItem)) {
            message.info("请选择费用!");
            return;
        }

        if (!R.isEmpty(declareFeeList)) {
            let addFlag = false;
            for (let j = 0; j < declareFeeList.length; j++) {
                if (R.equals(declareItem, declareFeeList[j].id + "")) {
                    addFlag = true;
                    break;
                }
            }

            if (!addFlag && !R.isEmpty(feeItemList)) {
                for (let i = 0; i < feeItemList.length; i++) {
                    if (R.equals(feeItemList[i].id + "", declareItem)) {
                        fee.code = feeItemList[i].code;
                        fee.costPrice = "";
                        fee.count = 1;
                        fee.currency = feeItemList[i].currency;
                        fee.fee = "";
                        fee.feeUnit = "JOB";
                        fee.id = declareItem;
                        fee.name = feeItemList[i].name;
                        fee.quotePrice = null;
                        fee.sellPrice = "";
                        fee.type = "2";//类型：用枚举常量
                        fee.weight = declareFeeList.length + 1;
                        fee.incidentals = true;
                        break;
                    }
                }
                if (!R.isEmpty(fee)) {
                    declareFeeList.push(fee);
                    this.setState({ declareFeeList: declareFeeList });
                }
            }
        }
    }

    delFeeIetm = (val) => {
        let dataSource = this.props.quotationFee.dataSource;
        let declareFeeList = dataSource.declareFeeList ? dataSource.declareFeeList : [];
        if (!R.isEmpty(declareFeeList)) {
            for (let j = 0; j < declareFeeList.length; j++) {
                if (R.equals(val, declareFeeList[j].id)) {
                    declareFeeList.pop(val);
                    this.setState({ declareFeeList: declareFeeList });
                }
            }
        }
    }

    onCountFee = (feeDisabled) => {
        this.setState({ feeDisabled })
        let baseRate = this.state.view ? this.props.quotationFee.quotation.baseRate : this.props.currencyRate.dataSource.rate
        let quoteRate = this.props.form.getFieldValue("quoteRate");

        if (!(typeof (quoteRate) === 'number' && quoteRate > 0)) {
            quoteRate = undefined
        }

        this.props.dispatch({
            type: 'quotationFee/getTotalAmoumt',
            payload: {
                baseRate,
                quoteRate,
                localFeeList: this.state.localFeeList,
                declareFeeList: this.state.declareFeeList,
                trailerFeeList: this.state.trailerFeeList,
                onSuccess: (data) => {
                    this.setState({
                        quotationAmount: data
                    });
                }
            }
        });
    }

    calculcateFee = (type, value) => {

        let requestBackend = true;//判断当前输入的条件是否满足请求后台的必要条件

        let values = { ...this.props.form.getFieldsValue(calculatedFields) };
        values[type] = value;

        //特殊字段处理
        let area = values.area ? values.area : [];
        values.province = area.length > 1 ? area[0] : undefined;
        values.city = area.length > 1 ? area[1] : undefined;
        values.district = area.length > 1 ? area[2] : undefined;
        values.street = area.length > 2 ? area[3] : undefined; //街道不一定存在

        let service = values.service ? values.service : [];
        values.declare = service.includes('1') ? "1" : undefined
        values.trailer = service.includes('2') ? "1" : undefined
        values.insurance = service.includes('3') ? "1" : undefined


        {/*<Input disabled={this.state.disabled} maxLength="20"/>*/ }
        let declare = service.includes('1') ? "1" : undefined;
        let trailer = service.includes('2') ? "2" : undefined;
        // let  abc=(service.includes('2') ? "2" : undefined)&&(service.includes('1') ? "1" : undefined);

        // if(R.equals( abc, "1")){
        //     console.log(abc);
        //     debugger;
        //     this.props.dispatch({
        //         type: 'feeItem/getAllFeeItems',
        //         payload: { type: 2 }
        //     });
        // }

        if (R.equals(declare, "1")) {
            this.props.dispatch({
                type: 'feeItem/getAllFeeItems',
                payload: { type: 2 }
            });
        }

        if (R.equals(trailer, "2")) {
            this.props.dispatch({
                type: 'feeItem/getAllFeeItems',
                payload: { type: 3 }
            });
        }

        if (!(typeof (value) === 'number' && value > 0) && ['size20gp', 'size40gp', 'size40hq', 'quoteRate'].includes(type)) { //柜号只允许输入大于0的数字
            values[type] = undefined;
            if (!values.size20gp && !values.size40gp && !values.size40hq) { //柜号都为空
                requestBackend = false;
            }
        }

        if (values.service && values.service.includes('2') && (!values.area || values.area.length === 0)) { //拖车勾选了但是地址没选择
            requestBackend = false;
        }
        // if (R.symmetricDifference(values.service, this.props.form.getFieldValue('service') ? this.props.form.getFieldValue('service') : [])[0] === '3') {
        //     requestBackend = false; //判断变动的是保险
        // }

        if (!values.size20gp && !values.size40gp && !values.size40hq) { //柜号都为空
            requestBackend = false;
        }

        if (requestBackend) {
            this.props.dispatch({
                type: 'quotationFee/getQuotationDetail',
                payload: {
                    ...values,
                    freightId: this.state.freightId,
                    onSuccess: () => { this.onCountFee() },
                    onFail: () => {
                        this.props.dispatch({
                            type: 'quotationFee/cleanData'//清空列表及统计结果
                        });
                    }
                }
            })
        } else {
            this.props.dispatch({
                type: 'quotationFee/cleanData'//清空列表及统计结果
            });
        }
    }

    handleQuotationFee = (status) => {
        let cstId = this.quoCustomerDetail.returnCst();
        if(R.isNil(cstId)){
            cstId = this.props.quotationFee.customer.id;
        }
        let cstForm = this.quoCustomerDetail.checkCstInfo();
        if (R.isNil(cstForm.id) && R.isNil(cstForm.companyName) && R.isNil(this.props.quotationFee.customer.id)) {        
            message.error("客户未保存或未选择客户");
            return;
        }

        let freightId = this.state.freightId
        let baseRate = this.state.view ? this.props.quotationFee.quotation.baseRate : this.props.currencyRate.dataSource.rate
        let localFeeList = this.state.localFeeList
        let declareFeeList = this.state.declareFeeList
        let trailerFeeList = this.state.trailerFeeList
        let values = this.props.form.getFieldsValue(['loadingPort', 'destinationPort', 'insuranceAmt', 'insuranceCurrency', 'size20gp', 'size40gp', 'size40hq', 'weight20gp', 'weight40gp', 'weight40hq', 'quoteRate'])
        let data = this.props.form.getFieldsValue(['area', 'service'])
        values.provinceCode = data.area && data.area[0] ? data.area[0] : ""
        values.cityCode = data.area && data.area[1] ? data.area[1] : ""
        values.districtCode = data.area && data.area[2] ? data.area[2] : ""
        values.streetCode = data.area && data.area[3] ? data.area[3] : ""

        values.isDeclare = data.service && (data.service.includes('1')) ? "1" : "";
        values.isTrailer = data.service && (data.service.includes('2')) ? "1" : "";
        values.isInsurance = data.service && (data.service.includes('3')) ? "1" : "";

        if (!R.equals(R.pick(Object.keys(values), this.props.quotationFee.dataSource), values)) {
            this.props.dispatch({
                type: this.state.recordId ? 'quotationFee/updateQuotationv' : 'quotationFee/addQuotation',
                payload: {
                    ...values,
                    ...cstForm,
                    id: this.state.recordId,
                    cstId,
                    freightId,
                    baseRate,
                    transportType: "1",
                    declareFeeList,
                    localFeeList,
                    trailerFeeList,
                    status,
                    onSuccess: () => {
                        this.handleCancel();
                        if(this.props.refreshList) this.props.refreshList();
                    }
                }
            });
        }
    }

    localFeeColumns = [
        { title: '费用名称', dataIndex: 'name', key: 'name' },
        { title: '单位', dataIndex: 'feeUnit', key: 'feeUnit' },
        {
            title: '单价', key: 'fee',
            render: record => {
                return <span>{record.currency} {record.fee}</span>
            }
        },
        { title: '数量', dataIndex: 'count', key: 'count' },
        {
            title: '成本价', key: 'costPrice',
            render: record => {
                return <span>{record.currency} {record.costPrice}</span>
            }
        },
        {
            title: '建议价', key: 'sellPrice',
            render: record => {
                return <span>{record.currency} {record.sellPrice}</span>
            }
        },
        {
            title: '业务报价', key: 'localFeeQuotation',
            render: (text, record, index) => {
                return (
                    <div>
                        {record.currency}&nbsp;&nbsp;
                        <InputNumber disabled={this.state.cstEdit ? this.state.disabled : this.state.feeDisabled}
                            maxLength="18"
                            value={record.quotePrice}
                            onChange={this.handleChangeLocalFee.bind(this, record)}
                        />
                    </div>
                );
            }
        }
    ];

    declareFeeColumns = [
        { title: '费用名称', dataIndex: 'name', key: 'name' },
        { title: '单位', dataIndex: 'feeUnit', key: 'feeUnit' },
        {
            title: '单价', key: 'fee',
            render: record => {
                return <span>{record.currency} {record.fee}</span>
            }
        },
        {
            title: '成本价', key: 'costPrice',
            render: record => {
                return <span>{record.currency} {record.costPrice}</span>
            }
        },
        {
            title: '建议价', key: 'sellPrice',
            render: record => {
                return <span>{record.currency} {record.sellPrice}</span>
            }
        },
        {
            title: '业务报价', key: 'declareFeeQuotation',
            render: (text, record, index) => {
                return (
                    <div>
                        {record.currency}&nbsp;&nbsp;
                        <InputNumber disabled={this.state.cstEdit ? this.state.disabled : this.state.feeDisabled}
                            maxLength="18"
                            value={record.quotePrice}
                            onChange={this.handleChangeDeclareFee.bind(this, record)}
                        />
                    </div>
                );
            }
        },
        {
            title: '操作',
            render: (record) => {
                let delLink = record.incidentals ? <a href="#" onClick={this.delFeeIetm.bind(this, record.id, false)}
                    disabled={this.state.view ? this.state.disabled : this.state.feeDisabled} >删除</a> : "";

                return <span>{delLink}</span>
            }
        }
    ];

    trailerFeeColumns = [
        { title: '费用名称', dataIndex: 'name', key: 'name' },
        { title: '单位', dataIndex: 'feeUnit', key: 'feeUnit' },
        {
            title: '单价', key: 'fee',
            render: record => {
                return <span>{record.currency} {record.fee}</span>
            }
        },
        {
            title: '成本价', key: 'costPrice',
            render: record => {
                return <span>{record.currency} {record.costPrice}</span>
            }
        },
        {
            title: '建议价', key: 'sellPrice',
            render: record => {
                return <span>{record.currency} {record.sellPrice}</span>
            }
        },
        {
            title: '业务报价', key: 'trailerFeeQuotation',
            render: (text, record, index) => {
                return (
                    <div>
                        {record.currency}&nbsp;&nbsp;
                        <InputNumber disabled={this.state.cstEdit ? this.state.disabled : this.state.feeDisabled}
                            maxLength="18"
                            value={record.quotePrice}
                            onChange={this.handleChangeTrailerFee.bind(this, record)}
                        />
                    </div>
                );
            }
        },
        {
            title: '操作',
            render: (record) => {
                let delLink = record.incidentals ? <a href="#" onClick={this.traItem.bind(this, record.id, false)}
                    disabled={this.state.view ? this.state.disabled : this.state.feeDisabled} >删除</a> : "";

                return <span>{delLink}</span>
            }
        }
    ];

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { xs: { span: 8 }, sm: { span: 8 } }, wrapperCol: { xs: { span: 15 }, sm: { span: 14 } } };
        let layout = { labelCol: { span: 4 }, wrapperCol: { span: 19 } };
        let formItemLayout3 = { labelCol: { span: 1 }, wrapperCol: { span: 22 } };

        let quoCstRecordData = R.isNil(this.props.quotationFee.customer) ? null : this.props.quotationFee.customer
        let quotationData = R.isNil(this.props.quotationFee.quotation) ? null : this.props.quotationFee.quotation
        let quotationAmountData = R.isNil(this.props.quotationFee.quotationAmount) ? null : this.props.quotationFee.quotationAmount

        let dataSource = R.isNil(this.props.quotationFee.freightFeeList) ? {} : this.props.quotationFee.freightFeeList;
        let cstdataSource = R.isNil(this.state.cstData) ? null : this.state.cstData
        let rateData = R.isNil(this.props.currencyRate.dataSource) ? null : this.props.currencyRate.dataSource
        let totalData = R.isNil(this.props.quotationFee.totalDataSource) ? null : this.props.quotationFee.totalDataSource
        let feeItemList = this.props.feeItem.feeItemList ? this.props.feeItem.feeItemList : []

        let conDataSource = R.isNil(this.props.lastSearchConditon) ? {} : this.props.lastSearchConditon;

        let baseRate = this.state.view ? quotationData.baseRate : rateData.rate
        let serviceData = [];
        R.isEmpty(quotationData.isDeclare) ? null : serviceData.push("1");
        R.isEmpty(quotationData.isTrailer) ? null : serviceData.push("2");
        R.isEmpty(quotationData.isInsurance) ? null : serviceData.push("3");

        let areaSource = [];
        R.isNil(quotationData.provinceCode) ? null : areaSource.push(quotationData.provinceCode);
        R.isNil(quotationData.cityCode) ? null: areaSource.push(quotationData.cityCode);
        R.isNil(quotationData.districtCode) ? null : areaSource.push(quotationData.districtCode);
        R.isNil(quotationData.streetCode) ? null : areaSource.push(quotationData.streetCode);

        let area = [];
        R.isNil(conDataSource.province) ? null : area.push(conDataSource.province);
        R.isNil(conDataSource.city) ? null : area.push(conDataSource.city);
        R.isNil(conDataSource.district) ? null : area.push(conDataSource.district);
        R.isNil(conDataSource.street) ? null : area.push(conDataSource.street);

        // let options = [];
        // let dataList = R.isNil(this.props.company) ? null : this.props.company.dataSource;
        // for (let i in dataList) {
        //     options.push(<Option value={dataList[i].id}>{dataList[i].companyName}</Option>)
        // }

        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleQuotationFee.bind(this, "1")} style={{ display: this.state.disabled ? "none" : "inline-block" }}>保存草稿</Button>,
            <Button key="submit" size="large" loading={this.props.loading} onClick={this.handleQuotationFee.bind(this, "2")} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>提交</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this)}>{"取消"}</Button>
        ];

        return (
            <div>
                {this.state.open ?
                    <Modal maskClosable={false} visible={this.state.open} width={900} title={"物流报价"} confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                        <Tabs tabPosition={'top'}>
                            <TabPane tab="报价客户信息" key="1">
                                <QuoCustomerDetail wrappedComponentRef={(inst) => this.quoCustomerDetail = inst}
                                    disabled={this.state.disabled}
                                    dataSource={this.state.view ? quoCstRecordData : undefined}
                                    cstEdit={this.state.cstEdit}
                                    cstInfoDisabled={this.state.cstInfoDisabled}
                                    isOrder = {false}
                                />
                            </TabPane>
                        </Tabs>

                        <Tabs tabPosition={'top'}>
                            <TabPane tab="服务项目" key="1">
                                <Form>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label={'服务内容'}>
                                                {getFieldDecorator('service', {
                                                    initialValue: this.state.view ? serviceData :
                                                        (this.props.lastSearchConditon && this.props.lastSearchConditon.service ? this.props.lastSearchConditon.service : [])
                                                })(
                                                    <CheckboxGroup style={{ width: 800 }}
                                                        onChange={this.calculcateFee.bind(this, 'service')}
                                                        disabled={this.state.disabled}
                                                    >
                                                        <Checkbox value="1">报关</Checkbox>
                                                        <Checkbox value="2">拖车</Checkbox>
                                                        <Checkbox value="3">保险</Checkbox>
                                                    </CheckboxGroup>
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="起运港" hasFeedback>
                                                {getFieldDecorator('loadingPort', {
                                                    initialValue: this.state.view ? quotationData.loadingPort + "" : (this.state.loadingId ? this.state.loadingId + "" : undefined)
                                                })(
                                                    <PortSelect disabled={true} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="目的港" hasFeedback>
                                                {getFieldDecorator('destinationPort', {
                                                    initialValue: this.state.view ? quotationData.destinationPort + "" : (this.state.destinationId ? this.state.destinationId + "" : undefined)
                                                })(
                                                    <PortSelect disabled={true} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>

                                    {this.props.form.getFieldValue('service') && this.props.form.getFieldValue('service').includes("3") ?
                                        <Row>
                                            <Col span={12}>
                                                <FormItem {...formItemLayout} label="货运保险货值">
                                                    {getFieldDecorator('insuranceAmt', {
                                                        initialValue: this.state.view ? quotationData.insuranceAmt : conDataSource.insuranceAmt
                                                    })(
                                                        <InputNumber disabled={this.state.disabled} min={0} max={99999999999} maxLength="18" style={{ width: '100%' }} />
                                                        )}
                                                </FormItem>
                                            </Col>
                                            <Col span={12}>
                                                <FormItem {...formItemLayout} label="币种">
                                                    {getFieldDecorator('insuranceCurrency', {
                                                        initialValue: this.state.view ? quotationData.insuranceCurrency : conDataSource.insuranceCcy
                                                    })(
                                                        <Select size="large" style={{ width: '100%' }} allowClear disabled={this.state.disabled}>
                                                            <Select.Option value="1">CNY</Select.Option>
                                                            <Select.Option value="2">USD</Select.Option>
                                                        </Select>
                                                        )}
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        : ""}

                                    {this.props.form.getFieldValue('service') && this.props.form.getFieldValue('service').includes("2") ?
                                        <Row>
                                            <Col span={24}>
                                                <FormItem {...layout} label="装柜地址">
                                                    {getFieldDecorator('area', {
                                                        initialValue: this.state.view ? areaSource : area
                                                    })(
                                                        <StreetSelect style={{ width: "100%" }} disabled={this.state.disabled} onChange={this.calculcateFee.bind(this, "area")} />
                                                        )}
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        : ""}
                                </Form>
                            </TabPane>
                        </Tabs>

                        <Tabs tabPosition={'top'}>
                            <TabPane tab="柜型/柜量" key="1">
                                <Form>
                                    {/* <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label={'数量（20GP）'}>
                                                {getFieldDecorator('size20gp', {
                                                    initialValue: this.state.view ? quotationData.size20gp : dataSource.size20gp
                                                })(
                                                    <InputNumber disabled={this.state.disabled} maxLength="4" style={{ width: '70%' }} onChange={this.calculcateFee.bind(this, "size20gp")} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="货重KGS（20GP）">
                                                {getFieldDecorator('weight20gp', {
                                                    initialValue: this.state.view ? quotationData.weight20gp : dataSource.h20gp
                                                })(
                                                    <InputNumber disabled={this.state.disabled} maxLength="18" style={{ width: '70%' }} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label={'数量（40GP）'}>
                                                {getFieldDecorator('size40gp', {
                                                    initialValue: this.state.view ? quotationData.size40gp : dataSource.size40gp
                                                })(
                                                    <InputNumber disabled={this.state.disabled} maxLength="4" style={{ width: '70%' }} onChange={this.calculcateFee.bind(this, "size40gp")} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="货重KGS（40GP）">
                                                {getFieldDecorator('weight40gp', {
                                                    initialValue: this.state.view ? quotationData.weight40gp : dataSource.h40gp
                                                })(
                                                    <InputNumber disabled={this.state.disabled} maxLength="18" style={{ width: '70%' }} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="数量（40HQ）">
                                                {getFieldDecorator('size40hq', {
                                                    initialValue: this.state.view ? quotationData.size40hq : dataSource.size40hq
                                                })(
                                                    <InputNumber disabled={this.state.disabled} maxLength="4" style={{ width: '70%' }} onChange={this.calculcateFee.bind(this, "size40hq")} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="货重KGS（40HQ）">
                                                {getFieldDecorator('weight40hq', {
                                                    initialValue: this.state.view ? quotationData.weight40hq : dataSource.h40hq
                                                })(
                                                    <InputNumber disabled={this.state.disabled} maxLength="18" style={{ width: '70%' }} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row> */}
                                    <Row>
                                        <Col span={4} style={{ marginLeft: 90, marginTop: 12 }}>
                                            <FormItem {...formItemLayout3}>
                                                {getFieldDecorator('size20gp', {
                                                    initialValue: this.state.view ? quotationData.size20gp : dataSource.size20gp
                                                })(
                                                    <InputNumber disabled={this.state.disabled} min={0} maxLength="4" style={{ width: '100%' }} placeholder="数量" onChange={this.calculcateFee.bind(this, "size20gp")}/>
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={2} style={{ marginTop: 14 }}>
                                            <span><font size="2">*20GP</font></span>
                                        </Col>
                                        <Col span={4} style={{ marginTop: 12 }}>
                                            <FormItem {...formItemLayout3}>
                                                {getFieldDecorator('weight20gp', {
                                                    initialValue: this.state.view ? quotationData.weight20gp : dataSource.h20gp
                                                })(
                                                    <InputNumber disabled={this.state.disabled} min={0} maxLength="18" style={{ width: '100%' }} placeholder="重量" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={2} style={{ marginTop: 14 }}>
                                            <span><font size="2">KGS</font></span>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={4}  style={{ marginLeft: 90 }}>
                                            <FormItem {...formItemLayout3}>
                                                {getFieldDecorator('size40gp', {
                                                    initialValue: this.state.view ? quotationData.size40gp : dataSource.size40gp
                                                })(
                                                    <InputNumber disabled={this.state.disabled} min={0} maxLength="4" style={{ width: '100%' }} placeholder="数量" onChange={this.calculcateFee.bind(this, "size40gp")}/>
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={2}>
                                            <span><font size="2">*40GP</font></span>
                                        </Col>
                                        <Col span={4}>
                                            <FormItem {...formItemLayout3}>
                                                {getFieldDecorator('weight40gp', {
                                                    initialValue: this.state.view ? quotationData.weight40gp : dataSource.h40gp
                                                })(
                                                    <InputNumber disabled={this.state.disabled} min={0} maxLength="18" style={{ width: '100%' }} placeholder="重量" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={2}>
                                            <span><font size="2">KGS</font></span>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={4}  style={{ marginLeft: 90 }}>
                                            <FormItem {...formItemLayout3}>
                                                {getFieldDecorator('size40hq', {
                                                    initialValue: this.state.view ? quotationData.size40hq : dataSource.size40hq
                                                })(
                                                    <InputNumber disabled={this.state.disabled} min={0} maxLength="4" style={{ width: '100%' }} placeholder="数量" onChange={this.calculcateFee.bind(this, "size40hq")}/>
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={2}>
                                            <span><font size="2">*40HQ</font></span>
                                        </Col>
                                        <Col span={4}>
                                            <FormItem {...formItemLayout3}>
                                                {getFieldDecorator('weight40hq', {
                                                    initialValue: this.state.view ? quotationData.weight40hq : dataSource.h40hq
                                                })(
                                                    <InputNumber disabled={this.state.disabled} min={0} maxLength="18" style={{ width: '100%' }} placeholder="重量" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={2}>
                                            <span><font size="2">KGS</font></span>
                                        </Col>
                                    </Row>
                                </Form>
                            </TabPane>
                        </Tabs>

                        <Tabs tabPosition={'top'}>
                            <TabPane tab={<div><span>业务报价明细</span><span style={{ color: 'red' }}> （仅供参考,实际费用请以最终账单为准）</span></div>} key="1">
                                <Row>
                                    {/* <Col span={12}>
                                        <FormItem {...formItemLayout} label="当前结算汇率">
                                            {getFieldDecorator('baseRate', {
                                                initialValue: this.state.view ? quotationData.baseRate : rateData.rate
                                            })(
                                                <InputNumber disabled={true} min={0} max={99999999999} maxLength="18" style={{ width: '70%' }} />
                                                )}
                                            &nbsp;&nbsp;(财务)
                                        </FormItem>
                                    </Col> */}
                                    <Col span={12}>
                                        <span style={{ fontSize: '14px', marginLeft: 140, lineHeight: 2.4 }}>当前结算汇率(财务): {baseRate}</span>
                                    </Col>
                                    <Col span={11}>
                                        <FormItem {...formItemLayout} label="报价汇率">
                                            {getFieldDecorator('quoteRate', {
                                                initialValue: this.state.view ? quotationData.quoteRate : dataSource.quotationRate
                                            })(
                                                <InputNumber min={0} disabled={this.state.disabled} maxLength="18" style={{ width: '75%' }} onChange={this.calculcateFee.bind(this, 'quoteRate')} />
                                                )}
                                        </FormItem>
                                    </Col>
                                </Row>
                                {/* <Row>
                                    <Col span={12}>
                                        <Button type="primary" icon="search" style={{ marginTop: 10, marginLeft: 350 }} onClick={this.calculcateFee.bind(this)} size={'large'}>计算费用</Button>
                                    </Col>
                                </Row> */}

                                <Tabs tabPosition={'top'}>
                                    <TabPane tab="海运费用" key="1">
                                        <Row>
                                            <Col span={3} style={{ float: 'right', marginBottom: 20, display: this.state.cstEdit ? 'none' : "inline-block" }}>
                                                <span><Button type="primary" size={'small'} onClick={this.changeDisabled.bind(this)}>编辑</Button></span> &nbsp;&nbsp;
                                                <span><Button type="primary" size={'small'} onClick={this.onCountFee.bind(this, true)}>确认</Button></span>
                                            </Col>
                                        </Row>
                                        <Table rowKey='weight' loading={this.props.loading} dataSource={this.state.localFeeList} columns={this.localFeeColumns} bordered={true} size={'middle'} pagination={false} />
                                        <Row>
                                            <div style={{ textAlign: 'center', marginTop: 30 }}>
                                                <div>
                                                    <span>成本合计 </span>
                                                    <span style={{ color: 'red' }}>CNY: &nbsp;&nbsp;{this.state.quotationAmount.costLocalCNY}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span style={{ color: 'red' }}>USD: &nbsp;&nbsp;{this.state.quotationAmount.costLocalUSD}</span>
                                                    <br />
                                                    <br />
                                                    <span>报价合计 </span>
                                                    <span style={{ color: 'red' }}>CNY: &nbsp;&nbsp;{this.state.quotationAmount.quoteLocalCNY}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span style={{ color: 'red' }}>USD: &nbsp;&nbsp;{this.state.quotationAmount.quoteLocalUSD}</span>
                                                </div>
                                            </div>
                                        </Row>
                                    </TabPane>

                                    {this.props.form.getFieldValue('service') && this.props.form.getFieldValue('service').includes("1") ?
                                        <TabPane tab="报关费用" key="2">
                                            <Row>
                                                <Col span={7} style={{ display: this.state.view ? 'none' : 'inline-block' }}>
                                                    {getFieldDecorator('declareItem', {
                                                        initialValue: (R.isNil(dataSource.feeItemId) || R.isEmpty(dataSource.feeItemId)) ? undefined : dataSource.feeItemId + ""
                                                    })(
                                                        <Select style={{ width: '80%' }} disabled={this.state.view ? this.state.disabled : this.state.feeDisabled}
                                                            showSearch placeholder="可通过输入关键字搜索" allowClear filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                                                            {
                                                                !R.isNil(feeItemList) ? feeItemList.map(item => {
                                                                    return (<Select.Option value={item.id + ""} key={item.id + ""}>{item.name + "[" + item.code + "]"}</Select.Option>);
                                                                }) : ''
                                                            }
                                                        </Select>
                                                        )}
                                                </Col>

                                                <Col span={7} style={{ display: this.state.view ? 'none' : 'inline-block' }}>
                                                    <Button type="primary" size={'default'} disabled={this.state.view ? this.state.disabled : this.state.feeDisabled}
                                                        onClick={this.addFeeIetm.bind(this)}>确认增加</Button>
                                                </Col>

                                                <Col span={3} style={{ float: 'right', marginBottom: 20, display: this.state.cstEdit ? 'none' : "inline-block" }}>
                                                    <span><Button type="primary" size={'small'} onClick={this.changeDisabled.bind(this)}>编辑</Button></span> &nbsp;&nbsp;
                                                    <span><Button type="primary" size={'small'} onClick={this.onCountFee.bind(this, true)}>确认</Button></span>
                                                </Col>
                                            </Row>
                                            <Table rowKey='weight' loading={this.props.loading} dataSource={this.state.declareFeeList} columns={this.declareFeeColumns} bordered={true} size={'middle'} pagination={false} />
                                            <Row>
                                                <div style={{ textAlign: 'center', marginTop: 30 }}>
                                                    <span>成本合计 </span>
                                                    <span style={{ color: 'red' }}>CNY: &nbsp;&nbsp;{this.state.quotationAmount.costDeclareAmoumtCNY}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <br />
                                                    <br />
                                                    <span>报价合计 </span>
                                                    <span style={{ color: 'red' }}>CNY: &nbsp;&nbsp;{this.state.quotationAmount.quoteDeclareAmoumtCNY}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                </div>
                                            </Row>
                                        </TabPane>
                                        :
                                        ""
                                    }

                                    {this.props.form.getFieldValue('service') && this.props.form.getFieldValue('service').includes("2") ?
                                        <TabPane tab="拖车费用" key="3">
                                            <Row>
                                                <Col span={7} style={{ display: this.state.view ? 'none' : 'inline-block' }}>
                                                    {getFieldDecorator('trailerItem', {
                                                        initialValue: (R.isNil(dataSource.feeItemId) || R.isEmpty(dataSource.feeItemId)) ? undefined : dataSource.feeItemId + ""
                                                    })(
                                                        <Select style={{ width: '80%' }} disabled={this.state.view ? this.state.disabled : this.state.feeDisabled} allowClear
                                                            showSearch placeholder="可通过输入关键字搜索" filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>


                                                            {
                                                                !R.isNil(feeItemList) ? feeItemList.map(item => {
                                                                    return (<Select.Option value={item.id + ""} key={item.id + ""}>{item.name + "[" + item.code + "]"}</Select.Option>);
                                                                }) : ''
                                                            }
                                                        </Select>
                                                        )}
                                                </Col>

                                                <Col span={7} style={{ display: this.state.view ? 'none' : 'inline-block' }}>
                                                    <Button type="primary" size={'default'} disabled={this.state.view ? this.state.disabled : this.state.feeDisabled}
                                                        onClick={this.aaddFeeIetm.bind(this)}>确认增加</Button>
                                                </Col>

                                                <Col span={3} style={{ float: 'right', marginBottom: 20, display: this.state.cstEdit ? 'none' : "inline-block" }}>
                                                    <span><Button type="primary" size={'small'} onClick={this.changeDisabled.bind(this)}>编辑</Button></span> &nbsp;&nbsp;
                                                    <span><Button type="primary" size={'small'} onClick={this.onCountFee.bind(this, true)}>确认</Button></span>
                                                </Col>
                                            </Row>
                                            <Table rowKey='weight' loading={this.props.loading} dataSource={this.state.trailerFeeList} columns={this.trailerFeeColumns} bordered={true} size={'middle'} pagination={false} />
                                            <Row>
                                                <div style={{ textAlign: 'center', marginTop: 30 }}>
                                                    <span>成本合计 </span>
                                                    <span style={{ color: 'red' }}>CNY: &nbsp;&nbsp;{this.state.quotationAmount.costTrailerAmoumtCNY}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <br />
                                                    <br />
                                                    <span>报价合计 </span>
                                                    <span style={{ color: 'red' }}>CNY: &nbsp;&nbsp;{this.state.quotationAmount.quoteTrailerAmoumtCNY}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                </div>
                                            </Row>
                                        </TabPane>
                                        :
                                        ""
                                    }
                                </Tabs>
                            </TabPane>
                        </Tabs>

                        <Tabs tabPosition={'top'}>
                            <TabPane tab="费用总计" key="1">

                                <div style={{ background: '#ececec', padding: '10px' }}>
                                    <Row gutter={16}>
                                        <Col span={8}>
                                            <Card title="成本合计" bordered={false} style={{ marginLeft: 5, marginTop: 12, marginBottom: 10 }}>
                                                <span>累加CNY:</span><span style={{ marginLeft: 10, color: 'red' }}>{this.state.quotationAmount.costCNY}</span><br /><br />
                                                <span>累加USD:</span><span style={{ marginLeft: 10, color: 'red' }}>{this.state.quotationAmount.costUSD}</span><br /><br />
                                                <span>美元折人民币:</span><span style={{ marginLeft: 10, color: 'red' }}>{this.state.quotationAmount.costTotalCNY}</span><br /><br />
                                                <span>人民币折美元:</span><span style={{ marginLeft: 10, color: 'red' }}>{this.state.quotationAmount.costTotalUSD}</span>
                                            </Card>
                                        </Col>
                                        <Col span={8}>
                                            <Card title="业务报价合计" bordered={false} style={{ marginLeft: 10, marginTop: 12, marginBottom: 10 }}>
                                                <span>累加CNY:</span><span style={{ marginLeft: 10, color: 'red' }}>{this.state.quotationAmount.quoteCNY}</span><br /><br />
                                                <span>累加USD:</span><span style={{ marginLeft: 10, color: 'red' }}>{this.state.quotationAmount.quoteUSD}</span><br /><br />
                                                <span>美元折人民币:</span><span style={{ marginLeft: 10, color: 'red' }}>{this.state.quotationAmount.quoteTotalCNY}</span><br /><br />
                                                <span>人民币折美元:</span><span style={{ marginLeft: 10, color: 'red' }}>{this.state.quotationAmount.quoteTotalUSD}</span>
                                            </Card>
                                        </Col>
                                        <Col span={8}>
                                            <Card title="毛利润合计" bordered={false} style={{ marginLeft: 10, marginTop: 12, marginBottom: 10, marginRight: 5 }}><br /><br /><br />
                                                <span>CNY: </span><span style={{ marginLeft: 10, color: 'red' }}>{this.state.quotationAmount.profitCNY}</span><br /><br /><br /><br />
                                            </Card>
                                        </Col>
                                    </Row>
                                </div>
                                {/* <Col span={12}>
                                            <a href="#" onClick={this.aaaa.bind(this, record.id)}>生成正式业务报价单</a></span>
                                        </Col> */}
                            </TabPane>
                        </Tabs>
                    </Modal>
                    : null}
            </div>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.quotationFee, quotationFee: state.quotationFee, company: state.company, currencyRate: state.currencyRate,
        feeItem: state.feeItem, quotationRecord: state.quotationRecord
    };
}

export default connect(mapStateToProps)(quotationFeeDetail);
